<template>
  <div>
    <el-card class="box-card">
      <search
        :searchProps="searchProps"
        @change="searchChange"
        @search="getList"
        v-if="isSearch"
      ></search>
      <labor @displaySearch="displaySearch"></labor>
      <myTable
        :loading="loading"
        :tableList="tableList"
        :page="params.page"
        :page_size="params.page_size"
        :total="total"
        @currentChange="currentChange"
        @sizeChange="sizeChange"
        @flowingChange="$refs.flowing.show($event)"
        @rechargeChange="$refs.recharge.show($event)"
      ></myTable>
    </el-card>
    <flowing ref="flowing"></flowing>
    <recharge ref="recharge"></recharge>
  </div>
</template>

<script>
import searchProps from "./table/search/searchProps"
import labor from "./table/labor"
import myTable from "./table"
import flowing from "./form/flowing"
import recharge from "./form/recharge"
import { list } from "@/api/account"
import { list as platList } from "@/api/plat"
export default {
  components: { myTable, labor, flowing, recharge },
  data() {
    return {
      loading: true,
      isSearch: false,
      tableList: [],
      params: {
        page: 1,
        page_size: 10,
        spread_id: "",
        state: 1,
      },
      total: 0,
      searchProps: searchProps,
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 获取账户列表
    async getList() {
      try {
        const { data } = await list(this.params)
        this.loading = false
        this.tableList = data.data
        this.total = data.total
        this.getPlatList()
      } catch (ex) {
        this.loading = false
        this.$msg.errorMsg(ex.msg)
      }
    },
    // 获取平台列表
    async getPlatList() {
      try {
        const { data } = await platList()
        const arr = data.data
        const updateArr = arr.map((obj) => {
          return { ...obj, name: obj.spread_name, id: obj.spread_id }
        })
        searchProps.formList.forEach((item, index) => {
          if (item.paramsName == "spread_id") {
            item.selectList = updateArr
          }
        })
      } catch (ex) {
        this.loading = false
        this.$msg.errorMsg(ex.msg)
      }
    },
    // 分页
    sizeChange(e) {
      this.params.page_size = e
      this.getList()
    },
    currentChange(e) {
      this.params.page = e
      this.getList()
    },
    // 是否显示搜索
    displaySearch() {
      this.isSearch = !this.isSearch
    },
    // 搜素
    searchChange(e) {
      const { spread_id, state } = e
      this.params = {
        ...this.params, // 保留已有属性
        spread_id,
        state,
      }
    },
  },
}
</script>

<style lang="scss" scoped></style>
